<template>
    <ex-dialog
      width="840px"
      class="ex-diolog"
      :title="title"
      :visible="visible"
      :close-on-click-modal="false"
      @closeDialog="handleClose"
    >
      <div class="main" v-loading="loading">
        <template>
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" :label-width="labelWidth" class="demo-ruleForm">
            <el-form-item label="直播间名称：" prop="name">
              <el-input placeholder="请输入" v-model="ruleForm.name" maxlength="20" show-word-limit :style="{width: inputWidth}"></el-input>
            </el-form-item>
          </el-form>
        </template>
      </div>
      <div class="button_box">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" :loading="AgreeLoading" @click="submitForm('ruleForm')">确认</el-button>
      </div>
    </ex-dialog>
  </template>
  <script>
  import Loading from "@/components/Loading/index";
  // api
  import {
    addLiveRoom,liveRoomDetail,editLiveRoom
  } from "@/api/customer/setting";
  export default {
    components: {
      Loading,
    },
    props: {
      visible: Boolean,
      id: String,
      pathType: String,
    },
    data() {
      return {
        labelWidth: "120px",
        inputWidth: "420px",
        title: "",
        loading: false,
        disabled: false,
        AgreeLoading: false,
        ruleForm: {
          id:'',
          name:'',//直播间名称
        },
        rules: {
          name: [
            { required: true,message: "请输入直播间名称",trigger: ["change", "bulr"]}
          ],
        },
      };
    },
    computed: {},
    created() {
      if(this.pathType=='edit'){
        this.title = '编辑直播间'
        this.getDetail()
      }else{
        this.title = '新增直播间'
      }
    },
    mounted() {
     
    },
    computed: {},
    methods: {
      //获取详情
      getDetail(){
        var id = this.id
        this.loading = true
        liveRoomDetail(id).then( res => {
          this.ruleForm = res.result
          this.loading = false
        }).catch(()=>{
          this.loading = false
        })
      },
      //取消
      handleClose(formName) {
        this.$emit("update:visible", false);
      },
      submitForm(formName) {
        //创建确定
        this.$refs[formName].validate(valid => {
          if (valid) {
            this.AgreeLoading = true
            var data = {
              ...this.ruleForm
            }
            if(this.pathType == 'add'){
              addLiveRoom(data).then(res => {
                this.handleClose()
                this.$message.success('保存成功')
                this.$emit('success')
                this.AgreeLoading = false
              }).catch(()=>{
                this.AgreeLoading = false
              })
            }else if(this.pathType == 'edit'){
              editLiveRoom(data).then(res => {
                this.handleClose()
                this.$message.success('修改成功')
                this.$emit('success')
                this.AgreeLoading = false
              }).catch(()=>{
                this.AgreeLoading = false
              })
            }
            
            
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
    }
  };
  </script>
  <style lang="scss" scoped>
  .ex-diolog {
    ::v-deep .ex--dialog--footer {
      border: none !important;
      padding: 0 !important;
    }
  
    ::v-deep .ex--dialog--main {
      padding: 10px 20px !important;
    }
  }
  .el-select,.el-input,.el-cascader{
    width: 400px;
  }
  .main {
    padding: 20px 20px;
  }
  .button_box{
    display: flex;
    justify-content: center;
  }
  .list_box{
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 10px 0;
    margin-bottom: 20px;
  }
  .addService{
    width: 540px;
    height: 30px;
    background-color: #1890ff;
    border-radius: 6px;
    color: #FFFFFF;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
  }
  .addService:hover{
    opacity: 0.8;
  }
  .delete_box{
    color: #fc3131;
    width: 100%;
    text-align: right;
    padding: 10px 20px 0 0;
  }
  .delete_box span{
    cursor: pointer;
  }
  .delete_box span:hover{
    opacity: 0.8;
  }
  </style>
  